<template>
	<view class="cell">
		<view>
			<view class="header">
				<view class="slow" v-if="data.isFast == 0">慢</view>
				<view class="label" v-else="data.isFast == 1">快</view>
				<view class="name">充电枪：{{data.socketName}}</view>
			</view>
			<view class="item">设备编码：{{data.shellId}}</view>
			<view class="item">设备名称：{{data.chargingName}}</view>
			<view class="item">核定功率：{{data.power}}</view>
			<view class="item">接口标准：{{data.standard}}</view>
		</view>
		<view>
			<view class="circle" v-if="data.status == 0">空闲</view>
			<view class="insert" v-if="data.status == 1">已插枪</view>
			<view class="charging" v-if="data.status == 2">充电中</view>
			<view  class="mode" v-if="data.isFast == 0">交流 慢充</view>
			<view  class="mode" v-else="data.isFast == 1">直流 快充</view>
		</view>
		<view class="line" v-if="showBottomLine"></view>
	</view>
</template>

<script>
	export default{
		props:{
			data:{
				type:Object,
				default:{}
			},
			showBottomLine:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return{
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cell{
		padding:30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;
		background-color: #FFFFFF;
	}
	.header{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.slow{
			background-color:#ffaa00;
			width:36rpx;
			height:36rpx;
			border-radius:6rpx;
			color:#FFFFFF;
			line-height:36rpx;
			text-align: center;
		}
		.label{
			background-color:#00C3A6;
			width:36rpx;
			height:36rpx;
			border-radius:6rpx;
			color:#FFFFFF;
			line-height:36rpx;
			text-align: center;
		}
		.name{
			color:#303133;
			font-size:32rpx;
			margin-left:12rpx;
		}
	}
	.item{
		color:#909399;
		font-size:24rpx;
		margin-top:18rpx;
	}
	.circle{
		width:144rpx;
		height:144rpx;
		line-height:144rpx;
		border-radius:82rpx;
		border: solid 10rpx #00C3A6;
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.insert{
		width:144rpx;
		height:144rpx;
		line-height:144rpx;
		border-radius:82rpx;
		border: solid 10rpx #ffaa00;
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.charging{
		width:144rpx;
		height:144rpx;
		line-height:144rpx;
		border-radius:82rpx;
		border: solid 10rpx #00aaff;
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.break{
		width:144rpx;
		height:144rpx;
		line-height:144rpx;
		border-radius:82rpx;
		border: solid 10rpx #ff0000;
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.offline{
		width:144rpx;
		height:144rpx;
		line-height:144rpx;
		border-radius:82rpx;
		border: solid 10rpx #aaaa7f;
		color:#303133;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	.mode{
		color:#606266;
		font-size:24rpx;
		text-align: center;
		margin-top:15rpx;
	}
	.line{
		position: absolute;
		left:0rpx;
		right:0rpx;
		bottom:0rpx;
		height:1rpx;
		background-color:#E4E7ED;
	}
</style>
